<template>
  <div class="TeaFunction">
      <div class="TeaFunctionHeader"><span>各类茶叶的功能</span></div>
      <div class="TeaFunctionContent">
          <div class="TeaType">
              <div class="Type" @click="changeBlack">
                  <span>红茶</span>
              </div>
              <div class="Introduce" v-show="currentTea === 'blackTea'"><span>{{blackTea}}</span></div>
          </div>
           <div class="TeaType">
              <div class="Type" @click="changeWhite">
                  <span>白茶</span>
              </div>
              <div class="Introduce" v-show="currentTea === 'whiteTea'"><span>{{whiteTea}}</span></div>
          </div>
           <div class="TeaType">
              <div class="Type" @click="changeDark">
                  <span>黑茶</span>
              </div>
              <div class="Introduce" v-show="currentTea === 'darkTea'"><span>{{darkTea}}</span></div>
          </div>
           <div class="TeaType">
              <div class="Type" @click="changeGreen">
                  <span>绿茶</span>
              </div>
              <div class="Introduce" v-show="currentTea === 'greenTea'"><span>{{greenTea}}</span></div>
          </div>
           <div class="TeaType">
              <div class="Type" @click="changeOolong">
                  <span>乌龙茶</span>
              </div>
              <div class="Introduce" v-show="currentTea === 'oolongTea'"><span>{{oolongTea}}</span></div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'TeaFunction',
    data() {
        return {

            currentTea:'blackTea',

            blackTea:`红茶的功效与作用红茶品性温和、香味醇厚，
                    可以帮助胃肠消化、去油腻、开胃口、助养生,促进食欲,可利尿、消除水肿。
                    有强壮心肌功能。抗菌力强，用红茶漱口可防滤过性病毒引起的感冒，并预防蛀牙与食物中毒，降低血糖值与高血压。
                    红茶功效不逊于绿茶且更有益于心脏。对脾胃虚弱的人来说，喝红茶时加点奶，可以起到一定的温胃作用。`,
            greenTea:`绿茶的功效与作用抗衰老、降血脂、防动脉硬化、降低心血管疾病（绿茶本身含有茶甘宁，茶甘宁是提高血管韧性的，使血管不容易破裂）；
                    瘦身减脂、防龋齿、清口臭、防癌、美白及防紫外线作用；抗菌，具备整肠的功能；可改善消化不良情况，如由细菌引起的急性腹泻，
                    可喝一点绿茶减轻病况。`,
            darkTea:`黑茶的功效与作用补充膳食营养、助消化、解油腻、顺肠胃；
                    降脂、减肥、软化人体血管、预防心血管疾病；抗氧化、延缓衰老，延年益寿；抗癌、抗突变、降血压；
                    降血糖，、杀菌、消炎、利尿解毒、降低烟酒毒害。`,
            oolongTea:`乌龙茶功效与作用美肤，抵抗衰老：饮用乌龙茶可以使血中维生素C含量持较高水平，尿中维生素C排出量减少。
                    瘦身：不可多得的减肥品。防蛀牙：饭后一杯乌龙，茶中含有的多酚类具有能够抑制齿垢酵素产生的功效。改善皮肤过敏。`,
            whiteTea:`白茶的功效与作用白茶是一种轻微发酵茶。
                    白茶功效具有三抗（抗辐射、抗氧化、抗肿瘤）三降（降血压、降血脂、降血糖）之保健功效，同时还有养心、养肝、养目、养神、养气、养颜的养身功效。
                    可治糖尿病、预防脑血管病、降血压、抗病毒提高免疫力。`,
        }
    },
    methods:{
        changeBlack(){
            this.currentTea = 'blackTea'
        },
        changeWhite(){
            this.currentTea = 'whiteTea'
        },
        changeDark(){
            this.currentTea = 'darkTea'
        },
        changeGreen(){
            this.currentTea = 'greenTea'
        },
        changeOolong(){
            this.currentTea = 'oolongTea'
        },
        }
}
        
</script>

<style scoped lang='less'>
.TeaFunction{
    width: 100%;
    min-height: 800px;
    // background-color: white;
    .TeaFunctionHeader{
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid rgb(224, 224, 224);
        span{
             font-size: 20px; 
             margin-left: 20px;
             float: left;
        }
    }
    .TeaFunctionContent{
    .TeaType{
        width: 100%;
        margin: 5px 0;
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        .Type{
            width: 100%;
            height: 60px;
            background-color: rgb(81, 192, 7);
            line-height: 60px;
            // display: flex;
            // justify-content: flex-start;
            // position: relative;
            span{
                // width: 100%;    
                //  height: 100%;
                
                
                font-size: 18px;
                margin-left: 20px;
                float: left;
                // position: relative;
                // transform: translate(0 -50%);
                // background-color: white;
            }
        }
        .Introduce{
            width: 100%;
            min-height: 100px;
                background-color: white;

            span{
                font-size: 16px;
                margin-left: 20px;
                float: left;
                margin-top: 20px;
            }
        }
    }
    }
}
</style>